<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>首页</title>
		<!--<link rel="stylesheet" href="/static/css/bootstrap.min.css" />-->
		<!--<link rel="stylesheet" href="/static/css/app1.css" />-->
				<!--<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">-->
    <!--&lt;!&ndash;<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">&ndash;&gt;-->
	<!--<link rel="stylesheet" href="/static/css/app1.css">-->
	</head>

	<body class="bg01">
		<div class="wrapper" >
			<div class="container-fluid">
				<div class="row fill-h">


					<div class="col-lg-12 fill-h">
						<!--<div class="xpanel-wrapper xpanel-wrapper-5">-->
							<!--<div class="xpanel">-->
								<!--&lt;!&ndash; 气泡图 &ndash;&gt;-->
								<!--<div class="report_chart" id="qipao"></div>-->
							<!--</div>-->
						<!--</div>-->
						<div class="xpanel-wrapper xpanel-wrapper-5">
							<div class="xpanel">
								<!-- 漏斗图 -->
								<div class="report_chart" id="time_num"></div>
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-5" id="2">
							<div class="xpanel" >
								<!-- 柱状图 -->
								<div class="report_chart" id="cnum_pubtime_num"></div>
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-5" id="3">
							<div class="xpanel">
								<!-- 折线图 -->
								<div class="report_chart" id="pubtime_cnum"></div>
							</div>
						</div>
                        <div class="xpanel-wrapper xpanel-wrapper-5" id="4">
							<div class="xpanel">
								<!-- 折线图2 -->
								<div class="report_chart" id="ctype_month_num"></div>
							</div>
						</div>
					</div>
			</div>
		</div>
			<!--<a class="btn btn-default" href="#top" role="button" style="position:fixed;right:0;bottom:0">-->
			<!--回到顶部-->
			<!--</a>-->


		</div>
		<a href="#top" class="btn" title="回到顶端"></a>
		<!--<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>-->
		<!--<script type="text/javascript" src="/static/js/echarts.min.js"></script>-->
		<script type="text/javascript">

			$(function(){
				<!--气泡图-->
				<!--var chart_qipaotu = echarts.init(document.getElementById("qipao"));-->
				<!--load(chart_qipaotu)-->
				function qipaotu(data){
					<!--var data = [-->
						<!--[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],-->
						<!--[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]-->
					<!--];-->

					option = {
						backgroundColor: 'rgba(0,0,0,0)',
						grid:{
							bottom:'10%',
						},
						title: {
							text: '1990 与 2015 年各国家人均寿命与 GDP'
						},
						legend: {
							right: 10,
							data: ['1990', '2015']
						},
						xAxis: {
							name:'公司规模',
							splitLine: {
								lineStyle: {
									type: 'dashed'
								}
							},
							nameTextStyle:{
								color:'#fff'
							},
							axisLine:{
								lineStyle:{
									color:'#fff'
								},
							},
						},
						yAxis: {
							name:'日期',
							splitLine: {
								lineStyle: {
									type: 'dashed'
								}
							},
							nameTextStyle:{
								color:'#fff'
							},
							axisLine:{
								lineStyle:{
									color:'#fff'
								},
							},
							scale: true
						},
						series: [{
							name: '1990',
							data: data,
							type: 'scatter',
							symbolSize: function (data) {
								<!--console.log(data)-->
								return Math.sqrt(data[2]);
							},
							emphasis: {
								label: {
									show: true,
									<!--formatter: function (param) {-->
										<!--return param.data[3];-->
									<!--},-->
									color:'#fff',
									position: 'top'
								}
							},
							itemStyle: {
								shadowBlur: 10,
								shadowColor: 'rgba(120, 36, 50, 0.5)',
								shadowOffsetY: 5,
								color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
									offset: 0,
									color: 'rgb(251, 118, 123)'
								}, {
									offset: 1,
									color: 'rgb(204, 46, 72)'
								}])
							}
						}]
					};
					chart_qipaotu.setOption(option);
					loadoff(chart_qipaotu)
				}

				<!--$.get("/report/qipao",result=>{-->
					<!--console.log(result.data)-->
					<!--qipaotu(result.data)-->
				<!--})-->

				<!--漏斗图-->
				var chart_time_num = jobs.initChartId("time_num")
				load(chart_time_num)
				function time_num(data){
					option = {
						backgroundColor: 'rgba(0,0,0,0)',
						title: {
							text: '1-5月岗位数量变化',
							textStyle:{
								color:'#fff'
							},

						},
						tooltip: jobs.getTooltip({
							formatter: function (params) {
								return "月份:" + params.name + "<br>" + "招聘数量:" + params.value
							}
						}),
						toolbox: {
							feature: {
								dataView: {readOnly: false},
								saveAsImage: {}
							}
						},
						legend: {
							textStyle:{
								color:'#fff'
							},
						},
						series: [
							{
								name:'漏斗图',
								type:'funnel',
								left: '10%',
								top: 60,
								//x2: 80,
								bottom: 60,
								width: '80%',
								// height: {totalHeight} - y - y2,
								sort: 'descending',
								gap: 2,
								label: {
									show: true,
									position: 'inside'
								},
								labelLine: {
									length: 10,
									lineStyle: {
										width: 1,
										type: 'solid'
									}
								},
								itemStyle: {
									borderColor: '#fff',
									borderWidth: 1
								},
								emphasis: {
									label: {
										fontSize: 20
									}
								},
								data: data
							}
						]
					};

					<!--var chart = echarts.init(document.getElementById("time_num"));-->
					chart_time_num.setOption(option);
					loadoff(chart_time_num)
				}
				$.get("/report/time_num",result=>{
					time_num(result);
				})


				<!--柱状图，不同规模企业五月份和三月份对比 id = cnum_pubtime_num-->
				var chart_cnum_pubtime_num = jobs.initChartId("cnum_pubtime_num")
				load(chart_cnum_pubtime_num)
				function cnum_pubtime_num(data){
					option = {
						title:{
							text:'3-5月各规模公司招聘数量增比'
						},
						tooltip: jobs.getTooltip({
							formatter: function (params) {
								return "公司规模:" + params.name + "<br>" + "増比:" + params.value+"%"
							}
						}),
										toolbox: {
							    feature: {
								dataView: {readOnly: false},
								restore: {},
								  magicType: {
                                        type: ['line']
                                    },
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: data.xAxis,
							name:'公司规模',
							z:2,
						},
						yAxis: {
							type: 'value',
							name:'増比',
							axisLabel:{
								formatter:'{value}%'
							},
						},
						series: [{
							data: data.data,
							type: 'bar'
						}]
					};

					<!--var chart = echarts.init(document.getElementById("cnum_pubtime_num"));-->
					chart_cnum_pubtime_num.setOption(option);
					loadoff(chart_cnum_pubtime_num)
				}
				$.get("/report/cnum_pubtime_num",result=>{
					<!--console.log(result)-->
					cnum_pubtime_num(result)
				})

				<!--折线图-->
				var chart_pubtime_cnum = jobs.initChartId("pubtime_cnum")
				load(chart_pubtime_cnum)
				function pubtime_cnum(data){
					var option = {
						title: {
							text: '1-5月各规模公司招聘数量每日变化'
						},
						tooltip: jobs.getTooltip({
							trigger: 'axis'
						}),
						legend: {
						    top:"8%",
							data: data.guimo,
							textStyle:{
								color:'#fff'
							},
						},
						grid: {
						    top:'20%',
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
							dataView: {readOnly: false},
								restore: {},
								  magicType: {
                                        type: ['bar']
                                    },
                                saveAsImage: {},
							}
						},
						xAxis: {
							type: 'category',
							name:'日期',
							boundaryGap: false,
							data: data.month
						},
						yAxis: {
							type: 'value',
							name:'招聘人数',
						},
						// 数据缩放
						dataZoom: {
							borderColor: "transparent",
							showDetail: false,
							type: "slider",
							// 前10个
							endValue: 4,
							//控制y轴，垂直
							<!--orient: "vertical"-->
						},
						series: [
							{
								name: data.guimo[0],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data1,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[1],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data2,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[2],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data3,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[3],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data4,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[4],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data5,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[5],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data6,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							},
							{
								name: data.guimo[6],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data7,
								emphasis:{
								    label:{
								        show:true,
								        position:'left',
								        color:'#fff',
								        formatter:'{a}',
								    }
								},
							}
						]
					};
					<!--var chart = echarts.init(document.getElementById("pubtime_cnum"));-->
					chart_pubtime_cnum.setOption(option);
					loadoff(chart_pubtime_cnum)
				}
				$.get("/report/pubtime_cnum",result=>{
					console.log(result)
					pubtime_cnum(result)
				})


				<!--折线图2-->
				var chart_ctype_month_num = jobs.initChartId("ctype_month_num")
				load(chart_ctype_month_num)
				function ctype_month_num(data){
					var option = {
						title: {
							text: '1-5月各类型公司招聘数量变化'
						},
						tooltip: jobs.getTooltip({
							trigger: 'axis'
						}),
						legend: {
						    left:"35%",
							data: data.guimo,
							textStyle:{
								color:'#fff'
							},
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
										dataView: {},
								restore: {},
								  magicType: {
                                        type: ['bar']
                                    },
                                saveAsImage: {},
							}
						},
						xAxis: {
							type: 'category',
							name:'月份',
							boundaryGap: false,
							data: data.month
						},
						yAxis: {
							type: 'value',
							name:'招聘人数',
						},
						series: [
							{
								name: data.gongsi[0],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data1,
								areaStyle:{},
								stack: '总量',
							},
							{
								name: data.gongsi[1],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data2,
								areaStyle:{},
								stack: '总量',
							},
							{
								name: data.gongsi[2],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data3,
								stack: '总量',
							},
							{
								name: data.gongsi[3],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data4,
								stack: '总量',
							},
							{
								name: data.gongsi[4],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data5,
								stack: '总量',
							},
							{
								name: data.gongsi[5],
								type: 'line',
								smooth:true,
								areaStyle: {},
								data: data.data6,
								stack: '总量',
							}
						]
					};
					<!--var chart = echarts.init(document.getElementById("chart_ctype_month_num"));-->
					chart_ctype_month_num.setOption(option);
					loadoff(chart_ctype_month_num)
				}
				$.get("/report/ctype_month_num",result=>{
					console.log(result)
					ctype_month_num(result)
				})

			})
		</script>
	</body>
</html>